<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>LBS地图定位系统-GN</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
   
	<!--css,js-->
	<style type="text/css">
		body{font-size:12px;font-family:微软雅黑;background:url("images/bg.jpg") no-repeat;background-size:cover;}
		*{margin:0;padding:0;}
		.gn_wrap{width:1000px;height:600px;margin:50px auto;}
		h1{font-size:20px;color:#fff;background:#65BAED;text-align:center;line-height: 50px;}
		#container{width:1000px;height:550px;margin:100px auto;border:1px soild red;}
		/*menu start*/
		.menu{border:1px solid #eee;width:100px;background:#fff;box-shadow:1px 1px 5px 0px #000;}
		.menu ul li{list-style:none;line-height:34px;padding-left:10px;}
		.menu ul li:hover{background:#F9F7F7;}
		/*end mennu*/
		
	</style>



</head>
<body>
<!--container start-->
	<div class="gn_wrap">
		<h1>LBS定位，测量尺寸，添加标记功能</h1>
		<div id="container" class="gn"></div>
	</div>
<!--end container-->

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=fc5a4fb79a7f7f3d41ff14116aae565d&plugin=AMap.MouseTool"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    var menu=new ContextMenu(map);
    function ContextMenu(map) {
        var me = this;
        this.mouseTool = new AMap.MouseTool(map); //地图中添加鼠标工具MouseTool插件
        this.contextMenuPositon = null;
        var content = [];
        content.push("<div class='menu'>");
        content.push("    <ul class='context_menu'>");
        content.push("        <li onclick='menu.zoomMenu(0)'>缩小</li>");
        content.push("        <li class='split_line' onclick='menu.zoomMenu(1)'>放大</li>");
        content.push("        <li class='split_line' onclick='menu.distanceMeasureMenu()'>距离量测</li>");
        content.push("        <li onclick='menu.addMarkerMenu()'>添加标记</li>");
        content.push("    </ul>");
        content.push("</div>");
        this.contextMenu = new AMap.ContextMenu({isCustom: true, content: content.join('')});//通过content自定义右键菜单内容
        //地图绑定鼠标右击事件——弹出右键菜单
        map.on('rightclick', function(e) {
            me.contextMenu.open(map, e.lnglat);
            me.contextMenuPositon = e.lnglat; //右键菜单位置
        });
    }

    ContextMenu.prototype.zoomMenu = function zoomMenu(tag) {//右键菜单缩放地图
        if (tag === 0) {
            map.zoomOut();
        }
        if (tag === 1) {
            map.zoomIn();
        }
        this.contextMenu.close();
    }
    ContextMenu.prototype.distanceMeasureMenu=function () {  //右键菜单距离量测
        this.mouseTool.rule();
        this.contextMenu.close();
    }
    ContextMenu.prototype.addMarkerMenu=function () {  //右键菜单添加Marker标记
        this.mouseTool.close();
        var marker = new AMap.Marker({
            map: map,
            position: this.contextMenuPositon //基点位置
        });
        this.contextMenu.close();
    }
</script>
</body>
</html>